<template>
    <div class="enhanced-overtime-management">
        <div class="header">

            <div class="header-controls">
                <div class="tabs">
                    <el-radio-group v-model="activeTab" @change="handleTabChange" :disabled="!hasDataFetched">
                        <el-radio-button label="all">全部</el-radio-button>
                        <el-radio-button label="confirmed">已确认</el-radio-button>
                        <el-radio-button label="unconfirmed">未确认</el-radio-button>
                    </el-radio-group>
                </div>
                <div class="search-box">
                    <el-input v-model="searchQuery" placeholder="搜索员工..." class="search-input" clearable size="large"
                        @clear="handleSearchClear" @keyup.enter="handleSearch" :disabled="!hasDataFetched">
                        <template #prefix>
                            <el-icon>
                                <Search />
                            </el-icon>
                        </template>
                    </el-input>
                </div>
                <el-button type="info" @click="showMonthSelector">
                    <el-icon>
                        <Calendar />
                    </el-icon>获取加班时长
                </el-button>
                                 <el-button type="warning" @click="showSummaryDialog" :disabled="!hasDataFetched">
                     <el-icon>
                         <Collection />
                     </el-icon>汇总加班调休
                 </el-button>
                                 <el-button type="primary" @click="handleReset" :disabled="!hasDataFetched">
                     <el-icon>
                         <Collection />
                     </el-icon>重置调休时长
                 </el-button>
                 <el-button type="success" @click="exportExcel" :disabled="!hasDataFetched">
                     <el-icon>
                         <Document />
                     </el-icon>导出Excel
                 </el-button>
            </div>
        </div>

        <div class="content-container">
            <el-table :data="pagedTableData" style="width: 100%" class="enhanced-table"
                :row-class-name="tableRowClassName" empty-text="暂无数据" v-loading="loading">
                <el-table-column prop="department" label="部门" fixed>
                    <template #default="{ row }">
                        <div class="department-cell">
                            <span class="dept-badge" :style="{ backgroundColor: getDeptColor(row.department) }"></span>
                            <span>{{ row.department }}</span>
                        </div>
                    </template>
                </el-table-column>

                <el-table-column prop="name" label="姓名" fixed>
                    <template #default="{ row }">
                        <div class="name-cell">
                            <span>{{ row.name }}</span>
                        </div>
                    </template>
                </el-table-column>

                <!-- 历史加班数据 -->
                <el-table-column v-for="month in recentMonths" :key="month" :label="month.replace('年', '/') + '结余'">
                    <template #default="{ row }">
                        <div class="overtime-hour">
                            {{ row.overtimeHistory[month] || 0 }}<span class="hour-unit">小时</span>
                        </div>
                    </template>
                </el-table-column>

                <el-table-column label="本月调休">
                    <template #default="{ row }">
                        <div class="adjustment-display">
                            {{ row.currentMonthAdjustment }}<span class="hour-unit">小时</span>
                                                         <el-button type="primary" link size="small" @click="showAdjustmentDialog(row)" :disabled="!hasDataFetched">
                                 编辑
                             </el-button>
                        </div>
                    </template>
                </el-table-column>

                <el-table-column label="本月加班">
                    <template #default="{ row }">
                        <div class="overtime-hour current">
                            {{ row.currentMonthOvertime }}<span class="hour-unit">小时</span>
                        </div>
                    </template>
                </el-table-column>

                <el-table-column label="剩余总时长">
                    <template #default="{ row }">
                        <div class="remaining-hours" :class="{ 'warning': row.totalRemaining <= 0 }">
                            {{ row.totalRemaining }}<span class="hour-unit">小时</span>
                        </div>
                    </template>
                </el-table-column>

                <el-table-column label="休假记录" prop="remarks" width="200">
                    <template #default="{ row }">
                        <div class="leave-cell" @dblclick="hasDataFetched ? handleEditRemarks(row) : null" :class="{ 'disabled': !hasDataFetched }">
                            <span v-if="!row.editingRemarks">{{ row.remarksText || '' }}</span>
                            <el-input v-else v-model="row.remarksText" ref="remarksInput" placeholder="请输入休假记录"
                                clearable @blur="saveRemarks(row)" @keyup.enter="saveRemarks(row)"
                                @keyup.escape="cancelEditRemarks(row)" />
                        </div>
                    </template>
                </el-table-column>
            </el-table>

            <div class="pagination-container">
                <el-pagination v-model:current-page="currentPage" v-model:page-size="pageSize"
                    :page-sizes="[1000, 500, 200, 100]" layout="total, sizes, prev, pager, next, jumper"
                    :total="totalRecords" @size-change="handleSizeChange" @current-change="handleCurrentChange" />
            </div>
        </div>

        <!-- 调休编辑对话框 -->
        <el-dialog v-model="adjustmentDialogVisible" :title="`${editingRow.name} - 调休时长`" width="400px"
            :close-on-click-modal="false">
            <div class="adjustment-dialog-content">
                <div class="info-row">
                    <span class="info-label">部门：</span>
                    <span class="info-value">{{ editingRow.department }}</span>
                </div>
                <div class="info-row">
                    <span class="info-label">当前调休：</span>
                    <span class="info-value">{{ editingRow.currentMonthAdjustment }}h</span>
                </div>

                <div class="adjustment-input-row">
                    <span class="info-label">调整至：</span>
                    <el-input-number v-model="adjustmentValue" :min="0" :precision="2" :step="0.5"
                        controls-position="right" size="large" />
                    <span class="hour-unit">小时</span>
                </div>
            </div>

            <template #footer>
                <span class="dialog-footer">
                    <el-button @click="adjustmentDialogVisible = false">取消</el-button>
                    <el-button type="primary" @click="confirmAdjustment">确认</el-button>
                </span>
            </template>
        </el-dialog>

        <!-- 月份选择对话框 -->
        <el-dialog v-model="monthSelectorVisible" title="选择月份获取加班时长" width="400px" :close-on-click-modal="false">
            <div class="month-selector-content">
                <div class="month-input-row">
                    <span class="info-label">选择月份：</span>
                    <el-date-picker
                        v-model="selectedMonth"
                        type="month"
                        placeholder="请选择月份"
                        format="YYYY-MM"
                        value-format="YYYY-MM"
                        size="large"
                        style="width: 200px;"
                    />
                </div>
            </div>

            <template #footer>
                <span class="dialog-footer">
                    <el-button @click="monthSelectorVisible = false">取消</el-button>
                    <el-button type="primary" @click="fetchOvertimeByMonth">确认获取</el-button>
                </span>
            </template>
        </el-dialog>

        <!-- 汇总加班调休对话框 -->
        <el-dialog v-model="summaryDialogVisible" title="汇总加班调休" width="400px" :close-on-click-modal="false">
            <div class="summary-dialog-content">
                <div class="summary-month-row">
                    <span class="summary-label">选择月份：</span>
                    <el-date-picker
                        v-model="summaryMonth"
                        type="month"
                        placeholder="请选择要汇总的月份"
                        format="YYYY-MM"
                        value-format="YYYY-MM"
                        size="large"
                        style="width: 200px;"
                    />
                </div>
                <div class="summary-warning">
                    <el-alert
                        title="重要提醒"
                        type="warning"
                        :closable="false"
                        show-icon
                    >
                        <template #default>
                            <p>汇总操作只有一次机会，请谨慎操作！</p>
                            <p>确认要汇总所选月份的加班调休时长吗？</p>
                        </template>
                    </el-alert>
                </div>
            </div>
            
            <template #footer>
                <span class="dialog-footer">
                    <el-button @click="summaryDialogVisible = false">取消</el-button>
                    <el-button type="warning" @click="handleSummary">确认汇总</el-button>
                </span>
            </template>
        </el-dialog>
    </div>
</template>

<script lang="ts" setup>
import { ref, computed, onMounted } from 'vue'
import { Search, Calendar, Collection, Document } from '@element-plus/icons-vue'
import { ElMessage, ElLoading, ElMessageBox } from 'element-plus'
import {
    GetOverTimeList,
    UpdateOverTimelong,
    ExportReportLeave,
    SummaryJobOverTimeLong,
    ResetJobOverTimeLong,
    UpdateOverTimeRemarks,
} from "@/api/newDemands/index";

interface OvertimeRecord {
    id: number
    department: string
    name: string
    overtimeHistory: Record<string, number>
    currentMonthOvertime: number
    currentMonthAdjustment: number
    totalRemaining: number
    remarks: string
    remarksText?: string
    isLeave: number // 1-已确认 2-未确认
    editingRemarks?: boolean
    originalRemarks?: string
}
const activeTab = ref('all')
const handleTabChange = () => {
    currentPage.value = 1
    pageSize.value = 1000 // 确保标签页切换时保持1000条每页
    fetchDataWithMonth()
}
// 部门颜色映射
const deptColors = [
    '#FF6B6B', '#4ECDC4', '#45B7D1', '#FFA07A',
    '#98D8C8', '#F06292', '#7986CB', '#9575CD'
]

const getDeptColor = (dept: string) => {
    const index = dept.charCodeAt(0) % deptColors.length
    return deptColors[index]
}

// 获取最近6个月的月份标签
const getRecentMonths = () => {
    const months = []
    const now = new Date()
    for (let i = 0; i < 6; i++) {
        const date = new Date(now)
        const targetMonth = date.getMonth() - (i + 1)
        date.setFullYear(date.getFullYear(), targetMonth, 1)
        const month = `${date.getFullYear()}年${date.getMonth() + 1}月`
        months.unshift(month)
    }
    return months
}

const recentMonths = ref<string[]>(getRecentMonths())

const handleSummary = async () => {
    if (!summaryMonth.value) {
        ElMessage.warning('请选择要汇总的月份');
        return;
    }

    try {
        await ElMessageBox.confirm(
            `汇总操作只有一次机会，请谨慎操作！确认要汇总${summaryMonth.value}的加班调休时长吗？`,
            '警告',
            {
                confirmButtonText: '确认',
                cancelButtonText: '取消',
                type: 'warning',
                center: true,
                customClass: 'summary-confirm-dialog'
            }
        )

        const loading = ElLoading.service({
            lock: true,
            text: `正在汇总${summaryMonth.value}的加班调休时长...`,
            background: 'rgba(0, 0, 0, 0.7)'
        })

        try {
            const { data } = await SummaryJobOverTimeLong(summaryMonth.value)

            if (data.code === 200) {
                await ElMessageBox.alert(data.msg, '汇总成功', {
                    type: 'success',
                    confirmButtonText: '确定',
                    customClass: 'summary-success-dialog'
                })
                // 重新获取最新数据
                await fetchDataWithMonth()
                // 关闭汇总对话框
                summaryDialogVisible.value = false
            } else {
                await ElMessageBox.alert(
                    `${data.msg.replace(/\n/g, '<br>')}`,  // 替换 \n 为 <br>
                    '汇总失败',
                    {
                        type: 'error',
                        confirmButtonText: '确定',
                        customClass: 'summary-error-dialog',
                        dangerouslyUseHTMLString: true  // 允许使用 HTML
                    }
                )
            }
        } catch (error) {
            await ElMessageBox.alert('汇总失败，请稍后重试', '错误', {
                type: 'error',
                confirmButtonText: '确定',
                customClass: 'summary-error-dialog'
            })
            console.error('汇总加班调休时长失败:', error)
        } finally {
            loading.close()
        }
    } catch (cancel) {
        // 用户点击了取消
        ElMessage.info('已取消汇总操作')
    }
}
const handleReset = async () => {
    try {
        await ElMessageBox.confirm(
            '重置调休时长，录入的调休数据会被全部清零，确定要重置吗？',
            '警告',
            {
                confirmButtonText: '确认',
                cancelButtonText: '取消',
                type: 'warning',
                center: true,
                customClass: 'summary-confirm-dialog'
            }
        )

        const loading = ElLoading.service({
            lock: true,
            text: '正在清空调休时长...',
            background: 'rgba(0, 0, 0, 0.7)'
        })

        try {
            const { data } = await ResetJobOverTimeLong()

            if (data.code === 200) {
                await ElMessageBox.alert(data.msg, '操作成功', {
                    type: 'success',
                    confirmButtonText: '确定',
                    customClass: 'summary-success-dialog'
                })
                // 重新获取最新数据
                await fetchDataWithMonth()
            } else {
                await ElMessageBox.alert(
                    `${data.msg.replace(/\n/g, '<br>')}`,  // 替换 \n 为 <br>
                    '操作失败',
                    {
                        type: 'error',
                        confirmButtonText: '确定',
                        customClass: 'summary-error-dialog',
                        dangerouslyUseHTMLString: true  // 允许使用 HTML
                    }
                )
            }
        } catch (error) {
            await ElMessageBox.alert('操作失败，请稍后重试', '错误', {
                type: 'error',
                confirmButtonText: '确定',
                customClass: 'summary-error-dialog'
            })
        } finally {
            loading.close()
        }
    } catch (cancel) {
        // 用户点击了取消
        ElMessage.info('已取消汇总操作')
    }
}

// 表格数据
const records = ref<OvertimeRecord[]>([])
const totalRecords = ref(0)

// 搜索功能
const searchQuery = ref('')

// 分页相关
const currentPage = ref(1)
const pageSize = ref(1000)
const loading = ref(false)

const pagedTableData = computed(() => {
    return records.value
})

const handleSizeChange = (val: number) => {
    pageSize.value = val
    currentPage.value = 1
    fetchDataWithMonth()
}

const handleCurrentChange = (val: number) => {
    currentPage.value = val
    fetchDataWithMonth()
}

const handleSearchClear = () => {
    currentPage.value = 1
    pageSize.value = 1000 // 清空筛选时设置为1000条每页
    fetchDataWithMonth()
}

// 调休编辑对话框
const adjustmentDialogVisible = ref(false)
const editingRow = ref<OvertimeRecord>({
    id: 0,
    department: '',
    name: '',
    overtimeHistory: {},
    currentMonthOvertime: 0,
    currentMonthAdjustment: 0,
    totalRemaining: 0,
    remarks: '',
    remarksText: '',
    isLeave: 0,
    editingRemarks: false,
    originalRemarks: ''
})
const adjustmentValue = ref(0)

const showAdjustmentDialog = (row: OvertimeRecord) => {
    editingRow.value = { ...row }
    adjustmentValue.value = row.currentMonthAdjustment
    adjustmentDialogVisible.value = true
}

const confirmAdjustment = async () => {
    const loading = ElLoading.service({
        lock: true,
        text: '正在保存调休时长...',
        background: 'rgba(0, 0, 0, 0.7)'
    })

    try {
        const { data } = await UpdateOverTimelong({
            id: editingRow.value.id,
            overTime: adjustmentValue.value
        })

        if (data.code === 200) {
            ElMessage.success('调休时长已更新')
            // 重新获取最新数据
            await fetchDataWithMonth()
        } else {
            ElMessage.error(data.msg || '更新调休时长失败')
        }
    } catch (error) {
        ElMessage.error('更新调休时长失败，请稍后重试')
        console.error('更新调休时长失败:', error)
    } finally {
        loading.close()
        adjustmentDialogVisible.value = false
    }
}

const exportExcel = async () => {
    try {
        let isLeave = undefined
        if (activeTab.value === 'confirmed') {
            isLeave = 1
        } else if (activeTab.value === 'unconfirmed') {
            isLeave = 2
        } else if (activeTab.value === 'all') {
            isLeave = 0
        }
        const response = await ExportReportLeave({
            userName: searchQuery.value,
            isLeave // 添加isLeave参数
        });

        // 从响应头获取文件名
        const contentDisposition = response.headers['content-disposition'];
        let fileName = '加班调休记录.xlsx'; // 默认文件名

        if (contentDisposition) {
            // 处理可能的中文文件名（后端需要做URL编码）
            const fileNameMatch = contentDisposition.match(/filename\*?=(?:UTF-8'')?([^;]+)/i);
            if (fileNameMatch && fileNameMatch.length > 1) {
                fileName = decodeURIComponent(fileNameMatch[1]);
            }
        }

        // 创建下载链接
        const url = window.URL.createObjectURL(new Blob([response.data]));
        const link = document.createElement('a');
        link.href = url;
        link.setAttribute('download', fileName);
        document.body.appendChild(link);
        link.click();

        // 清理
        document.body.removeChild(link);
        window.URL.revokeObjectURL(url);

    } catch (error) {
        console.error('导出失败:', error);
    }
}

// 表格行样式
const tableRowClassName = ({ row }: { row: OvertimeRecord }) => {
    return row.totalRemaining <= 0 ? 'warning-row' : ''
}

const fetchData = async () => {
    loading.value = true
    try {
        let isLeave = undefined
        if (activeTab.value === 'confirmed') {
            isLeave = 1
        } else if (activeTab.value === 'unconfirmed') {
            isLeave = 2
        } else if (activeTab.value === 'all') {
            isLeave = 0
        }

        const { data } = await GetOverTimeList({
            page: currentPage.value,
            pageSize: pageSize.value,
            keyword: '',
            userName: searchQuery.value,
            isLeave
        })

        if (data.code === 200) {
            totalRecords.value = data.data.total

            records.value = data.data.list.map((item: any) => {
                const overtimeHistory: Record<string, number> = {}
                recentMonths.value.forEach((month, index) => {
                    const monthKey = `m${index + 1}`
                    overtimeHistory[month] = item[monthKey] || 0
                })

                return {
                    id: item.ID,
                    department: item.departmentName,
                    name: item.userName,
                    overtimeHistory,
                    currentMonthOvertime: item.nowOverTime,
                    currentMonthAdjustment: item.nowLeaveTime,
                    totalRemaining: item.allTime,
                    remarks: item.overTimeremarks || '',
                    remarksText: item.overTimeremarks || '',
                    isLeave: item.isLeave,
                    editingRemarks: false, // 添加编辑状态
                    originalRemarks: item.overTimeremarks || '' // 保存原始值
                }
            })
        } else {
            ElMessage.error(data.msg || '获取数据失败')
        }
    } catch (error) {
        ElMessage.error('请求失败，请稍后重试')
        console.error('获取加班数据失败:', error)
    } finally {
        loading.value = false
    }
}

// 带月份筛选的数据获取函数
const fetchDataWithMonth = async () => {
    loading.value = true
    try {
        let isLeave = undefined
        if (activeTab.value === 'confirmed') {
            isLeave = 1
        } else if (activeTab.value === 'unconfirmed') {
            isLeave = 2
        } else if (activeTab.value === 'all') {
            isLeave = 0
        }

        const params: any = {
            page: currentPage.value,
            pageSize: pageSize.value,
            keyword: '',
            userName: searchQuery.value,
            isLeave
        }

        // 如果选择了月份，添加月份参数
        if (selectedMonth.value) {
            params.currentYearMonth = selectedMonth.value
        }

        const { data } = await GetOverTimeList(params)

        if (data.code === 200) {
            totalRecords.value = data.data.total

            records.value = data.data.list.map((item: any) => {
                const overtimeHistory: Record<string, number> = {}
                recentMonths.value.forEach((month, index) => {
                    const monthKey = `m${index + 1}`
                    overtimeHistory[month] = item[monthKey] || 0
                })

                return {
                    id: item.ID,
                    department: item.departmentName,
                    name: item.userName,
                    overtimeHistory,
                    currentMonthOvertime: item.nowOverTime,
                    currentMonthAdjustment: item.nowLeaveTime,
                    totalRemaining: item.allTime,
                    remarks: item.overTimeremarks || '',
                    remarksText: item.overTimeremarks || '',
                    isLeave: item.isLeave,
                    editingRemarks: false, // 添加编辑状态
                    originalRemarks: item.overTimeremarks || '' // 保存原始值
                }
            })
        } else {
            ElMessage.error(data.msg || '获取数据失败')
        }
    } catch (error) {
        ElMessage.error('请求失败，请稍后重试')
        console.error('获取加班数据失败:', error)
    } finally {
        loading.value = false
    }
}

// 搜索处理函数
const handleSearch = () => {
    currentPage.value = 1
    pageSize.value = 1000 // 搜索时设置为1000条每页
    fetchDataWithMonth()
}

// 添加编辑状态控制
const handleEditRemarks = (row: any) => {
    row.editingRemarks = true
    row.originalRemarks = row.remarksText // 保存原始值以便取消时恢复
}

const cancelEditRemarks = (row: any) => {
    row.remarksText = row.originalRemarks
    row.editingRemarks = false
}

// 保存休假记录
const saveRemarks = async (row: any) => {
    const loading = ElLoading.service({
        lock: true,
        text: '正在保存休假记录...',
        background: 'rgba(0, 0, 0, 0.7)'
    })

    try {
        const { data } = await UpdateOverTimeRemarks({
            id: row.id,
            remarks: row.remarksText || ''
        })

        if (data.code === 200) {
            ElMessage.success('休假记录已保存')
            row.originalRemarks = row.remarksText // 更新原始值
        } else {
            ElMessage.error(data.msg || '保存休假记录失败')
            row.remarksText = row.originalRemarks
        }
    } catch (error) {
        ElMessage.error('保存休假记录失败，请稍后重试')
        console.error('保存休假记录失败:', error)
        row.remarksText = row.originalRemarks
    } finally {
        row.editingRemarks = false
        loading.close()
    }
}

// 月份选择对话框
const monthSelectorVisible = ref(false)
const selectedMonth = ref<string>('')
const hasDataFetched = ref(false) // 标记是否成功获取过数据

// 汇总对话框相关状态
const summaryDialogVisible = ref(false)
const summaryMonth = ref<string>('')

const showMonthSelector = () => {
    monthSelectorVisible.value = true
    selectedMonth.value = new Date().toISOString().slice(0, 7) // 默认选择当前月份
}

const showSummaryDialog = () => {
    summaryMonth.value = new Date().toISOString().slice(0, 7) // 默认选择当前月份
    summaryDialogVisible.value = true
}

const fetchOvertimeByMonth = async () => {
    if (!selectedMonth.value) {
        ElMessage.warning('请选择要获取加班时长的月份')
        return
    }

    const loading = ElLoading.service({
        lock: true,
        text: '正在获取加班时长...',
        background: 'rgba(0, 0, 0, 0.7)'
    })

    try {
        const { data } = await GetOverTimeList({
            page: 1, // 获取第一页数据
            pageSize: 1000, // 获取所有数据
            keyword: '',
            userName: searchQuery.value,
            isLeave: 0, // 获取所有加班记录
            currentYearMonth: selectedMonth.value
        })

        if (data.code === 200) {
            const newRecords: OvertimeRecord[] = []
            data.data.list.forEach((item: any) => {
                const overtimeHistory: Record<string, number> = {}
                recentMonths.value.forEach((month, index) => {
                    const monthKey = `m${index + 1}`
                    overtimeHistory[month] = item[monthKey] || 0
                })

                                 newRecords.push({
                     id: item.ID,
                     department: item.departmentName,
                     name: item.userName,
                     overtimeHistory,
                     currentMonthOvertime: item.nowOverTime,
                     currentMonthAdjustment: item.nowLeaveTime,
                     totalRemaining: item.allTime,
                     remarks: item.overTimeremarks || '',
                     remarksText: item.overTimeremarks || '',
                     isLeave: item.isLeave,
                     editingRemarks: false,
                     originalRemarks: item.overTimeremarks || ''
                 })
            })

            // 合并新数据到现有数据中，避免重复
            const existingIds = new Set(records.value.map(r => r.id))
            const uniqueNewRecords = newRecords.filter(nr => !existingIds.has(nr.id))
            
            // 更新现有记录，添加新记录
            records.value = [...records.value, ...uniqueNewRecords]

            // 标记已成功获取数据
            hasDataFetched.value = true

            ElMessage.success(`${selectedMonth.value}的加班时长已获取并更新`)
            // 不需要重新调用fetchData，避免重复请求
            // await fetchData()
        } else {
            ElMessage.error(data.msg || '获取加班时长失败')
        }
    } catch (error) {
        ElMessage.error('获取加班时长失败，请稍后重试')
        console.error('获取加班时长失败:', error)
    } finally {
        loading.close()
        monthSelectorVisible.value = false
    }
}

onMounted(() => {
    // 页面加载时不调用接口，等待用户手动操作
    // fetchData()
    
    // 确保默认分页大小为1000条
    pageSize.value = 1000
})
</script>

<style scoped>
.enhanced-overtime-management {
    padding: 20px;
    height: 100vh;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    background-color: #f5f7fa;
    font-family: 'Helvetica Neue', Arial, sans-serif;
}

.header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
    padding: 0 10px;
}

.system-title {
    font-size: 22px;
    font-weight: 600;
    color: #333;
    margin: 0;
}

.search-box {
    width: 300px;
}

.content-container {
    flex: 1;
    display: flex;
    flex-direction: column;
    background-color: white;
    border-radius: 8px;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.08);
    overflow: hidden;
}

.enhanced-table {
    flex: 1;
    --el-table-border-color: #ebeef5;
    --el-table-header-bg-color: #f8fafc;
    --el-table-row-hover-bg-color: #f5f7fa;
}

.enhanced-table :deep(.el-table__header) th {
    font-weight: 600;
    color: #606266;
    background-color: #f8fafc !important;
}

.enhanced-table :deep(.el-table__body) tr:hover>td {
    background-color: #f5f7fa !important;
}

.department-cell {
    display: flex;
    align-items: center;
    gap: 8px;
}

.dept-badge {
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
}

.name-cell {
    display: flex;
    align-items: center;
    gap: 10px;
}

.overtime-hour {
    font-size: 14px;
    font-weight: 500;
    color: #606266;
}

/* 本月调休和本月加班列的特殊样式 */
.adjustment-display {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 18px;
    font-weight: 700;
    color: #1890ff;
    text-shadow: 0 1px 2px rgba(24, 144, 255, 0.1);
    padding: 8px 12px;
    background: linear-gradient(135deg, rgba(24, 144, 255, 0.05) 0%, rgba(24, 144, 255, 0.02) 100%);
    border-radius: 8px;
    border: 1px solid rgba(24, 144, 255, 0.1);
    transition: all 0.3s ease;
}

.adjustment-display:hover {
    background: linear-gradient(135deg, rgba(24, 144, 255, 0.08) 0%, rgba(24, 144, 255, 0.04) 100%);
    border-color: rgba(24, 144, 255, 0.2);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(24, 144, 255, 0.15);
}

.adjustment-display .hour-unit {
    font-size: 11px;
    font-weight: 500;
    color: #8c8c8c;
    margin-left: 4px;
}

.overtime-hour.current {
    font-size: 18px;
    font-weight: 700;
    color: #52c41a;
    text-shadow: 0 1px 2px rgba(82, 196, 26, 0.1);
    padding: 8px 12px;
    background: linear-gradient(135deg, rgba(82, 196, 26, 0.05) 0%, rgba(82, 196, 26, 0.02) 100%);
    border-radius: 8px;
    border: 1px solid rgba(82, 196, 26, 0.1);
    transition: all 0.3s ease;
    display: inline-block;
}

.overtime-hour.current:hover {
    background: linear-gradient(135deg, rgba(82, 196, 26, 0.08) 0%, rgba(82, 196, 26, 0.04) 100%);
    border-color: rgba(82, 196, 26, 0.2);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(82, 196, 26, 0.15);
}

.overtime-hour.current .hour-unit {
    font-size: 11px;
    font-weight: 500;
    color: #8c8c8c;
    margin-left: 4px;
}

.hour-unit {
    font-size: 10px;
    color: #909399;
    margin-left: 2px;
}

.adjustment-display {
    display: flex;
    align-items: center;
    gap: 8px;
}

.remaining-hours {
    font-size: 14px;
    font-weight: 600;
    color: #67c23a;
}

.remaining-hours.warning {
    color: #f56c6c;
}

.warning-text {
    color: #f56c6c;
}

.enhanced-table :deep(.warning-row)>td {
    background-color: #fef0f0 !important;
}

.enhanced-table :deep(.el-table__inner-wrapper::before) {
    display: none;
}

.enhanced-table :deep(.el-table__cell) {
    padding: 12px 0;
}

.enhanced-table :deep(.el-table__cell .cell) {
    padding: 0 12px;
}

.pagination-container {
    padding: 16px;
    display: flex;
    justify-content: flex-end;
    background-color: white;
    border-top: 1px solid #ebeef5;
}

.adjustment-dialog-content {
    padding: 0 10px;
}

.info-row {
    display: flex;
    margin-bottom: 16px;
    font-size: 14px;
}

.info-label {
    width: 100px;
    text-align: right;
    color: #909399;
}

.info-value {
    flex: 1;
    color: #606266;
}

.adjustment-input-row {
    display: flex;
    align-items: center;
    margin-top: 24px;
    margin-bottom: 10px;
}

.adjustment-input-row .info-label {
    margin-right: 10px;
}

.adjustment-input-row .hour-unit {
    margin-left: 8px;
    color: #909399;
}

/* 新增样式 */
.header-controls {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    margin-top: 10px;
}

.tabs {
    margin-right: 20px;
}

.search-box {
    width: 300px;
}

.search-export-container {
    display: flex;
    align-items: center;
    gap: 10px;
}

.export-btn {
    margin-left: 10px;
}

.summary-confirm-dialog {
    .el-message-box__content {
        color: #f56c6c;
        font-weight: bold;
    }

    .el-message-box__title {
        color: #f56c6c;
    }

    .el-button--primary {
        background-color: #f56c6c;
        border-color: #f56c6c;
    }
}

.summary-success-dialog {
    .el-message-box__content {
        color: #67c23a;
    }

    .el-message-box__title {
        color: #67c23a;
    }
}

.summary-error-dialog {
    .el-message-box__content {
        color: #f56c6c;
    }

    .el-message-box__title {
        color: #f56c6c;
    }

    .el-button--primary {
        background-color: #f56c6c;
        border-color: #f56c6c;
    }
}

.leave-cell {
    min-height: 32px;
    display: flex;
    align-items: center;
    cursor: pointer;
}

.leave-cell:hover {
    background-color: #f5f7fa;
}

.leave-cell span {
    width: 100%;
    padding: 0 12px;
    color: #606266;
    font-size: 14px;
}

.leave-cell .el-input {
    width: 100%;
}

.month-selector-content {
    padding: 0 10px;
}

.month-input-row {
    display: flex;
    align-items: center;
    margin-top: 24px;
    margin-bottom: 10px;
}

 .month-input-row .info-label {
     margin-right: 10px;
 }
 
 /* 汇总对话框样式 */
 .summary-dialog-content {
     padding: 20px 0;
 }
 
 .summary-month-row {
     display: flex;
     align-items: center;
     gap: 16px;
     margin-bottom: 20px;
 }
 
 .summary-label {
     font-size: 14px;
     color: #606266;
     font-weight: 500;
     min-width: 80px;
 }
 
 .summary-warning {
     margin-top: 16px;
 }
 
 .summary-warning .el-alert {
     margin-bottom: 0;
 }
 
 .summary-warning p {
     margin: 4px 0;
     line-height: 1.5;
 }
 
 /* 禁用状态样式 */
 .leave-cell.disabled {
     cursor: not-allowed;
     opacity: 0.6;
 }
 
 .leave-cell.disabled:hover {
     background-color: transparent;
 }
 
 /* 禁用状态的按钮样式 */
 .el-button:disabled {
     opacity: 0.6;
     cursor: not-allowed;
 }
 
 /* 禁用状态的输入框样式 */
 .el-input:deep(.el-input__wrapper) {
     transition: all 0.3s;
 }
 
 .el-input:deep(.el-input__wrapper.is-disabled) {
     background-color: #f5f7fa;
     border-color: #dcdfe6;
     color: #c0c4cc;
 }
 
 /* 禁用状态的单选按钮组样式 */
.el-radio-group:deep(.is-disabled) .el-radio-button__inner {
    background-color: #f5f7fa;
    border-color: #dcdfe6;
    color: #c0c4cc;
    cursor: not-allowed;
}

/* 响应式设计 - 小屏幕优化 */
@media (max-width: 768px) {
    .adjustment-display,
    .overtime-hour.current {
        font-size: 16px;
        padding: 6px 10px;
    }
    
    .adjustment-display .hour-unit,
    .overtime-hour.current .hour-unit {
        font-size: 10px;
    }
}

/* 响应式设计 - 超小屏幕优化 */
@media (max-width: 480px) {
    .adjustment-display,
    .overtime-hour.current {
        font-size: 14px;
        padding: 4px 8px;
    }
    
    .adjustment-display .hour-unit,
    .overtime-hour.current .hour-unit {
        font-size: 9px;
    }
}

/* 高分辨率屏幕优化 */
@media (min-resolution: 2dppx) {
    .adjustment-display,
    .overtime-hour.current {
        text-shadow: 0 0.5px 1px rgba(0, 0, 0, 0.1);
    }
}
</style>